<template>
  <e-container>
    <header>
      <e-icon type="SalesPersonnel" font-size="24px" color="#3c6cfe" />
      <span style="font-weight: bold; font-size: 16px; margin-left: 8px">{{ data.displayName }}</span>
      <a-tag
        v-if="data.performSale && data.performSale.calculationType === 2"
        color="#f0f4ff"
        style="margin-left: 2px; color: #7ca4ce"
      >
        Overseas
      </a-tag>
      <e-icon
        v-if="!readonly"
        type="edit"
        font-size="20px"
        color="#3c6cfe"
        style="position: absolute; right: 0; top: 0; line-height: inherit; cursor: pointer"
        @click="emits('edit')"
      />
    </header>
    <a-divider />
    <div class="title">
      <a-statistic
        title="Branch"
        :value="data.branchName"
        :value-style="{ fontSize: '16px', fontWeight: 'bold', color: '#404040' }"
      />
      <a-statistic
        title="Currency"
        :value="data.currencyName"
        :value-style="{ textAlign: 'right', fontSize: '16px', fontWeight: 'bold', color: '#404040' }"
      />
    </div>
    <div v-if="data.performSale" class="table">
      <a-row>
        <a-col :span="12" class="cell field">Number of Years</a-col>
        <a-col :span="12" class="cell field right">Year Factor</a-col>
      </a-row>
      <a-row v-for="item in data.yearPercents" :key="item.id">
        <a-col :span="12" class="cell value">{{ item.minYear }} ~ {{ item.maxYear }}</a-col>
        <a-col :span="12" class="cell value right">{{ item.yearPercent * 100 }} %</a-col>
      </a-row>
      <template v-if="data.performSale && data.performSale.calculationType === 1">
        <a-row>
          <a-col :span="12" class="cell field">Sales Amount</a-col>
          <a-col :span="12" class="cell field right">Commission Rate</a-col>
        </a-row>
        <a-row v-for="item in data.salesAmountPercents" :key="item.id">
          <a-col :span="12" class="cell value">
            {{ Utils.thousandsMark((item.minPrice / 1000).toFixed(2).toString()) }}K ~
            {{ Utils.thousandsMark((item.maxPrice / 1000).toFixed(2).toString()) }}K
          </a-col>
          <a-col :span="12" class="cell value right">{{ (item.moneyPercent * 100).toFixed(2) }} %</a-col>
        </a-row>
      </template>
      <template v-if="data.performSale && data.performSale.calculationType === 2">
        <a-row>
          <a-col :span="24" class="cell field">
            <a-space>
              <span>{{ data.year }} Year Quota</span>
              <a-tooltip>
                <template #title>
                  The commission for existing accounts will be 3.5% under sales quota, and 5% for meeting above annual
                  sales.
                </template>
                <e-icon type="tips" style="cursor: help" />
              </a-tooltip>
            </a-space>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" class="cell value">{{ currentYearMouthQuota[0] }}</a-col>
        </a-row>
        <a-row>
          <a-col :span="24" class="cell field">
            <a-space>
              <span>{{ data.year }} Monthly Quota</span>
              <monthly-quota-tooltip />
            </a-space>
          </a-col>
        </a-row>
        <a-row v-for="rowIndex in 3" :key="rowIndex">
          <a-col
            v-for="colIndex in 4"
            :key="colIndex"
            :span="6"
            class="cell value"
            :class="{ field: colIndex + 4 * (rowIndex - 1) - 1 === new Date().getMonth() }"
          >
            <div class="month">
              {{ Utils.numberToMonth(colIndex + 4 * (rowIndex - 1) - 1, true) }}
            </div>
            <div>{{ currentYearMouthQuota[colIndex + 4 * (rowIndex - 1)] }}</div>
          </a-col>
        </a-row>
      </template>
    </div>
    <div v-else>
      <e-empty centered>
        <template #description>Not set</template>
      </e-empty>
    </div>
  </e-container>
</template>

<script setup>
import { computed } from 'vue'
import EContainer from '@/components/EContainer.vue'
import EIcon from '@/components/EIcon.vue'
import Utils from '@/utils'
import EEmpty from '@/components/EEmpty.vue'
import MonthlyQuotaTooltip from '@/pages/components/MonthlyQuotaTooltip.vue'
const emits = defineEmits(['edit'])
const props = defineProps({
  data: {
    type: Object,
    default() {
      return {}
    }
  },
  readonly: {
    type: Boolean,
    default: false
  }
})
const currentYearMouthQuota = computed(() => {
  const currentYearData = props.data.yearQuotas.filter(item => item.sYear === new Date().getFullYear())
  const result = []
  for (let i = 0; i <= 12; i++) {
    result.push(
      currentYearData.find(item => item.sMonth === i)
        ? currentYearData.find(item => item.sMonth === i).salesQuota
        : '--'
    )
  }
  return result
})
</script>

<style lang="less" scoped>
@border: 1px solid @lighter-gray;
.e-container {
  header {
    display: inline-block;
  }
  .title {
    display: flex;
    justify-content: space-between;
    :deep(.ant-statistic-title) {
      color: #6b798e;
    }
  }
  .table {
    border: @border;
    margin-top: 24px;
    .cell {
      padding: 10px 14px;
      border-bottom: @border;
      border-right: @border;
      .month {
        color: rgba(107, 121, 142, 0.85);
      }
      &:last-child {
        border-right: none;
      }
      &.field {
        background-color: @milk;
        color: @text-gray;
      }
      &.right {
        text-align: right;
      }
    }
    .ant-row:last-child {
      .cell {
        border-bottom: none;
      }
    }
  }
}
</style>
